<template>
    <div class="form">
        <el-form ref="form" :model="obj.data" label-width="100px">
            <el-form-item label="知识库名称" prop="name" :rules="[formRulesMixin.notNull]">
                <el-input v-model="obj.data.name" placeholder="请输入知识库名称" maxlength="20" clearable autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="知识库描述" prop="description" :rules="[formRulesMixin.notNull]">
                <el-input v-model="obj.data.description" type="textarea" :rows="3" placeholder="请输入知识库描述" maxlength="100" clearable autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div class="btns">
            <el-button @click="$emit('close')">取消</el-button>
            <el-button type="primary" @click="upData">提交</el-button>
        </div>
    </div>
</template>

<script setup>
    import { reactive, getCurrentInstance, computed } from 'vue'
    let { proxy } = getCurrentInstance()
    const emit = defineEmits(['init', 'close']) //此处要完全对应，采用固定的update:prop属性
    const props = defineProps({
        data: { type: Object, default: () => { return {}}},
    })

    let obj = reactive({
        data: {
            knowledge_id: props.data.knowledge_id||'',
            embedding_id: props.data.embedding_id||3,
            name: props.data.name||'',
            description: props.data.description||''
        }
    })

    let upData = () => {
        proxy.$refs['form'].validate(valid => {
            if (valid) {
                proxy.$ajax({
                    url: '/manager/knowledge/design',
                    data: obj.data,
                    bfLoading: true
                }).then(data => {
                    if(data.success){
                        proxy.elMessageMixin(`修改成功`, 'success')
                        proxy.$emit('close')
                        proxy.$emit('init')
                    }else{
                        ElMessage({ message: data.err, type: 'error', duration: 2 * 1000 })
                    }
                }).catch(() => {})
            } else {
                return false
            }
        })
    }
</script>

<style scoped>
</style>

